<template>
  <div class="app-container">

    <!-- employee select  -->
    <div class="filter-container">
      <el-input v-model="listQuery.staffName" class="filter-item" placeholder="请输入姓名" maxlength="30" style="width:150px;" clearable="" @keyup.enter.native='handleFilter' />
      <el-input v-model="listQuery.staffId" class="filter-item" placeholder="请输入工号" maxlength="30" style="width:150px;" clearable="" @keyup.enter.native='handleFilter'/>
      <el-button class="filter-item" type="primary"   @click="handleFilter">查找</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      max-height="300"
      border
      fit
      highlight-current-row
      style="width:100%;"
    >
            
    <el-table-column align="center" min-width="100" label="姓名" prop="NAME" />
    <el-table-column align="center" min-width="100" label="工号" prop="STAFF_ID" />
     <el-table-column align="center" min-width="100" label="单位部门" prop="COLLEGE"  />

      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
           <el-button type="primary" size="mini" @click="handleSelect(scope.row)">选择</el-button>           
        </template>
      </el-table-column>
    </el-table>

   
   
     
  </div>

</template>

<style scoped>
  .pageHolder{
    padding:20px 10px 10px;
    text-align: right;
  }
  .avatar{
      width:200px;
  }
</style>
 

<script setup lang="ts">


import request from '@/api/js/http'

import {ref,reactive,onMounted,defineEmits} from 'vue'


const list = ref<IEmployee[]>([])
const total = ref(0)
const listLoading = ref(true)
const listQuery = reactive(
  {
        staffName:'',
        staffId:'',
        page: 1,
        limit: 100
      }
);
const emits = defineEmits(['select']);

onMounted(()=>{
  getList();
});
      

function handleSelect(row:any){
        var staffId = row.STAFF_ID;
        var staffName = row.NAME;
        emits('select', {staffId,staffName});
}

 
   
 

  const getList = () =>{
      listLoading.value = true

      request.get<IList<IEmployee>>('/emp/list',listQuery)
      .then((res)=>{

        listLoading.value = false
        if(res.data){
          list.value = res.data?.list;
          total.value = res.data?.total
        }
      })
      .catch(()=>{
        list.value = []
          total.value = 0
          listLoading.value = false
      });

    
  }
const handleFilter =()=>{
      listQuery.page = 1
      getList()
    }

 
</script>
